<template>
	<view class="box flex flex-column justify-start align-center">
		<!-- 使用 v-if 确保数据加载后再渲染 -->
		<view v-if="order && order.submit_user" class="bord mt-2 flex flex-column justify-start align-center py-5 mb-2"
			style=" width: 90%; border-radius: 25rpx; background-color: #d7eaff; box-shadow: 0 2px 4px #ffaaff;">
			<view class="top  flex justify-evenly align-center" style="width: 90%; color: #4c1d95; ">
				<view class="" style="position: relative;">
					<view class="top-left avater"
						style="position: relative; width: 150rpx; height: 150rpx; overflow: hidden;  border-radius: 150rpx; border: 2px solid #a855f7;">
						<image :src="order.submit_user[0].avater" mode="aspectFill" style="height: 100%; width: 100%;">
						</image>
					</view>
					<view class="sex flex justify-center align-center"
						:style="{color:order.submit_user[0].sex == '男'? 'aqua':'#fe68ca' }"
						style="width: 50rpx; height: 50rpx; font-size: 35rpx; border-radius: 50rpx; background-color:#55557f; position: absolute; bottom: 0; right: 0;">
						<i :class="order.submit_user[0].sex == '男'? 'el-icon-male':'el-icon-female'"></i>
					</view>
				</view>
				<view class="top-right info ml-2 flex flex-column align-start justify-center">
					<view class="nickname" style="font-size: 50rpx; font-weight: bold;">
						{{order.submit_user[0].nickname}}
					</view>
					<view class="content mt-1" style="font-size: 26rpx;">
						{{order.submit_user[0].introduction}}
					</view>
				</view>

				<view v-if="me=='false'" class="chat flex-2 flex justify-end" @click="goChat(order.submit_user[0]._id)"
					style="font-size: 50rpx;">
					<i class="el-icon-chat-dot-round pr-3"></i>
				</view>
				<view v-else class="chat flex-2 flex justify-end" @click="editOrder" style="font-size: 50rpx;">
					<i class="el-icon-edit pr-3"></i>
				</view>
			</view>
			<view class="sa mt-4" style="width: 90%; color: #4c1d95; ">
				<view class="school ">
					<text style="color:#2f855a;">学历</text>
					<text style="font-weight: bold; margin-left: 30rpx;">{{order.submit_user[0].school}}</text>
				</view>

				<view class="address mt-1">
					<text style="color:#2f855a;">预薪</text>
					<text
						style="font-weight: bold; margin-left: 30rpx;">{{order.money.min}}~{{order.money.max}}元/时</text>
				</view>
			</view>
		</view>

		<view v-if="order && order.submit_user"
			class="bord mt-2 mb-4 flex flex-column justify-start align-center pt-4 pb-3"
			style=" width: 90%; border-radius: 25rpx; background-color: #d7eaff;box-shadow: 0 2px 4px #ffaaff;">
			<view class="grade" style=" width: 90%;">
				<view class="" v-if="order.role=='老师'">
					<text style="color:#2f855a; font-size: 38rpx;">教授年级</text>
					<view class="subjectItem mt-2 flex justify-start align-center flex-wrap">
						<view class="flex justify-center align-center " v-for="(item,index) in order.grade" :key="index"
							v-if="item.state"
							style="border-radius: 50rpx; height: 80rpx; width: 180rpx; margin: 10rpx;background-color: #a855f7; color: #ffffff;">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="">
					<text
						style="color:#2f855a; font-size: 38rpx; display: block; ">{{order.role=='老师'?'教授科目':'补习科目'}}</text>
					<view class="subjectItem mt-2 flex justify-start align-center flex-wrap">
						<view class="flex justify-center align-center " v-for="(item,index) in order.subject"
							:key="index" v-if="item.state"
							style="border-radius: 50rpx; height: 80rpx; width: 180rpx; margin: 10rpx;background-color: #a855f7; color: #ffffff;">
							{{item.name}}
						</view>
					</view>
				</view>


				<view class="">
					<text style="color:#2f855a; font-size: 38rpx; display: block; margin-top: 20rpx;">个性标签</text>
					<view class="tagsItem mt-2 flex justify-start align-center flex-wrap">
						<view class="flex justify-center align-center " v-for="(item,index) in order.tags" :key="index"
							v-if="item.state"
							style="border-radius: 50rpx; height: 80rpx; width: 180rpx; margin: 10rpx;background-color: #a855f7; color: #ffffff;">
							{{item.name}}
						</view>
					</view>
				</view>


				<view class="">
					<text
						style="color:#2f855a; font-size: 38rpx; display: block; margin-top: 20rpx;">{{order.role=='老师'?'教学经验':'学习情况'}}</text>
					<view class="content mt-2 flex justify-start align-start "
						style="color: #4c1d95;  width: 100%; font-size: 30rpx;">
						{{order.content}}
					</view>
				</view>


				<view class="video" v-if="order.video">
					<text style="color:#2f855a; font-size: 38rpx; display: block; margin-top: 20rpx;">试讲视频</text>
					<video :src="order.video"
						style="border: 2px solid #a855f7; border-radius: 25rpx; margin-top: 30rpx;"></video>
				</view>

				<view class="">
					<text
						style="color:#2f855a; font-size: 38rpx; display: block; margin-top: 20rpx;">{{order.role=='老师'?'授课时间':'上课时间'}}</text>
					<view class="times mt-1" style="display: grid; grid-template-columns: 33% 33% 33%">
						<view class="item flex flex-column justify-start align-center mx-1 py-2 mt-2"
							style="border: 2px solid #4c1d95; border-radius: 25rpx; color: #4c1d95;"
							v-for="item in order.times" v-if="item.times.find(i=>i.start_time != '')">
							<view class="day" style="font-weight: bold;">
								{{item.day}}
							</view>
							<view class="Timedetail mt-2" v-for="detaile in item.times" v-if="detaile.start_time!=''"
								style="font-size: 28rpx;">
								{{detaile.start_time}}-{{detaile.end_time}}
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>

		<view v-if="order && order.role=='老师'&&this.me=='false'"
			class="bord mt-2 mb-4 flex flex-column justify-start align-center pt-4 pb-3"
			style=" width: 90%; border-radius: 25rpx; background-color: #d7eaff;box-shadow: 0 2px 4px #ffaaff;">
			<view style="width: 90%;" class="tag flex justify-evenly my-1 align-center mb-3" v-for="item in rateArr">
				<el-rate v-model="item.value" allow-half disabled :colors="colors">
				</el-rate>
				<text style="color: #5d31a0; font-weight: bold; font-size: 30rpx;">{{item.text}}</text>
			</view>

			<view class="comment mt-3" style="width: 90%;">
				<view class="flex justify-start align-start mb-2" v-for="item in Comment" style="width: 100%;">
					<view class="avatar"
						style="width: 100rpx; height: 100rpx; border-radius: 100rpx; overflow: hidden;">
						<img :src="item.submit_user.avater" style="width: 100rpx; height: 100rpx;" alt="" />
					</view>
					<view class="ml-2 flex flex-column justify-start align-start">
						<view class="nickname" style="color: #5d31a0; font-weight: bold; font-size: 40rpx;">
							{{item.submit_user.nickname}}
						</view>
						<view class="" style="color: #5d31a0;  font-size: 30rpx;">
							{{item.comment}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if=" order && order.submit_user&&this.me=='false'" class="submit mb-4"
			@click="goChat(order.submit_user[0]._id)" style="width: 90%; ">
			<u-button text="立即联系" color="linear-gradient(to right bottom,  #4c1d95,#a855f7)"
				style="width: 100%; border-radius: 25rpx;"></u-button>
		</view>
		<view v-else-if="order && order.submit_user&&this.me=='true'" class="submit mb-4 " style="width: 90%; ">
			<u-button text="修改" @click="editOrder" color="linear-gradient(to right bottom,  #4c1d95,#a855f7)"
				style="width: 100%; border-radius: 25rpx;"></u-button>

			<u-button text="删除" @click="deleteOrder"
				color="linear-gradient(to right bottom,  #a855f7,rgb(254, 104, 202))"
				style="width: 100%; border-radius: 25rpx; margin-top: 20rpx;"></u-button>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				user: {},
				order: null, // 初始化为空以便判断加载完成
				me: "",
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				orderId: "",
				rateArr: [{
						value: null,
						text: "标签符合度"
					},
					{
						value: null,
						text: "授课专业度"
					},
					{
						value: null,
						text: "回购意愿度"
					}
				],
				Comment: []
			};
		},
		onLoad(e) {
			this.init(e.order_id);
			this.me = e.me
			this.orderId = e.order_id
		},
		methods: {
			async init(id) {
				uni.showLoading({
					title: "加载中..."
				})
				// 从本地存储获取用户数据
				uni.getStorage({
					key: "jiajiao_demo_account",
					success: res => {
						this.user = res.data;
					}
				});
				const userTemp = db.collection("jiajiao_users").field(
					"_id,introduction,nickname,role,school,sex,avater,comment").getTemp();
				const orderTemp = db.collection("order").where({
					_id: id
				}).getTemp();
				await db.collection(orderTemp, userTemp).orderBy('publicTime', "desc").get().then(res => {
					this.order = res.result.data[0];
					if (this.order.submit_user[0].comment) {
						this.Comment = this.order.submit_user[0].comment
						let data = [0, 0, 0]
						this.Comment.forEach(item => {
							data[0] = data[0] + item.rateArr[0]
							data[1] = data[1] + item.rateArr[1]
							data[2] = data[2] + item.rateArr[2]
						})
						this.rateArr[0].value = data[0] / this.Comment.length
						this.rateArr[1].value = data[1] / this.Comment.length
						this.rateArr[2].value = data[2] / this.Comment.length
					}
					uni.hideLoading()
				});
			},
			async goChat(id) {
				// uni.showLoading({
				// 	title: ""
				// })
				let exist = false
				let res = await db.collection("chatHistory").where({
					talk_id: id,
					me_id: this.user._id
				}).get()

				if (res.result.data.length == 0)
					exist = false
				else exist = true



				if (!exist) {
					db.collection('chatHistory').add({
						talk_id: this.user._id,
						me_id: id,
						chatList: []
					})
					db.collection('chatHistory').add({
						talk_id: id,
						me_id: this.user._id,
						chatList: []
					}).then(res => {
						uni.hideLoading()
						uni.navigateTo({
							url: `/pages/chat/chat?id=${id}`
						})
					})
				} else {
					uni.hideLoading()
					uni.navigateTo({
						url: `/pages/chat/chat?id=${id}`
					})
				}

			},
			editOrder() {
				uni.navigateTo({
					url: "/pages/editOrder/editOrder"
				})
			},
			deleteOrder() {
				uni.showModal({
					title: "确认删除吗？",
					success: res => {
						if (res.confirm) {
							db.collection('order').doc(this.order._id).remove().then(res => {
								uni.showLoading({
									title: "请稍后"
								})
								setTimeout(function() {
									uni.hideLoading();
									uni.switchTab({
										url: "/pages/self/self"
									})
								}, 1000);

							})
						}
					}
				})
			}
		}

	};
</script>

<style lang="scss">
	page {
		background-color: #f3e8ff;
	}
</style>